<template>
	<div class="wx-tabbar-container">
		<div class="footer fixed acea-row row-middle">
			<div
				class="item"
				:style="{ color: footerIndex === current ? color : '#333' }"
				v-for="(item, footerIndex) in tabs"
				:key="footerIndex"
				@click="changeTabBar(item, footerIndex)"
			>
				<div class="iconfont iconfont_img">
					<wangx-icons
						:name="item.icon"
						:color="footerIndex === current ? color : '#333'"
					></wangx-icons>
				</div>
				<div>{{ item.name }}</div>
			</div>
		</div>
	</div>
</template>
<script>
import { getCurrentPagePath } from '@/utils';
export default {
	name: 'wx-tabbar',
	props: {
		color: {
			type: String,
			default: '#FF563D'
		}
	},
	data: function () {
		return {
			current: 0, //当前选中的下标
			tabs: [
				{
					name: '首页',
					icon: 'home',
					iconEd: 'home-fill',
					path: '/pages/index/index'
				},
				{
					name: '示例',
					icon: 'menu',
					iconEd: 'menu-fill',
					path: '/pages/example/index'
				}
			]
		};
	},
	created() {
		/* 隐藏tabbar */
		uni.hideTabBar();
		this.setCurrentIndex();
	},
	methods: {
		changeTabBar(val, index) {
			this.current = index;
			uni.switchTab({
				url: val.path
			});
			this.$emit('change', val);
		},
		setCurrentIndex() {
			const url = '/' + getCurrentPagePath();
			this.current = this.tabs.findIndex((item) => item.path === url);
		}
	},
	mounted() {
		/* let that = this;
			wx.getSystemInfo({
				success: function(res) {
					console.log(res);
					var name = "iPhone X";
					if (res.model.indexOf(name) > -1) {
						that.isIpx = true;
					}
				}
			}); */
	}
};
</script>

<style lang="scss" scoped>
.iconfont_img {
	display: flex;
	justify-content: center;
	align-items: center;
}

.footer {
	height: 110rpx;
	background-color: #ffffff;
	z-index: 999;
	padding-bottom: constant(safe-area-inset-bottom);
	padding-bottom: env(safe-area-inset-bottom);
}

.footer .iphonex-footer {
	height: 100rpx;
}

.footer .item {
	flex: 1;
	-o-flex: 1;
	-ms-flex: 1;
	text-align: center;
	font-size: 20rpx;
	color: #333333;
}

.footer .item.on {
	color: #ff563d;
}

.footer .item .iconfont {
	font-size: 45rpx;
	height: 55rpx;
	line-height: 55rpx;
}
</style>
